<template>
  <div class="info">
    <div class="info-title">{{ form.name }}</div>
    <div class="info-content" style="display: flex;align-items: center;">
      <span class="info-content_type" :style="{ background: methodStyle[form.method] }">{{
        form.method }}</span>
      <el-tooltip class="box-item" effect="dark" content="前置url" placement="bottom">
        <span class="env_url" v-if="isShowEnvUrl && envUrl">{{ envUrl }}</span>
      </el-tooltip>
      <span class="info-content_url">{{ form.url }}</span>
      <el-button type="primary" :icon="CaretRight" style="margin-left: 20px;" @click="toDebug"
        v-if="isShowTryItOutButton">调试</el-button>
    </div>
    <p class="info-desc">{{ form.description || '' }}</p>
  </div>
</template>

<script setup lang="ts">
import { propTypes } from '@/utils/propTypes'
import { CaretRight } from '@element-plus/icons-vue'
import { splitUrl } from '@/utils/url'
const envUrl = ref('')
const isShowEnvUrl = ref(false)
const environmentId = ref()


const props = defineProps({
  data: propTypes.object.def({}),
  editor: propTypes.bool.def()
})
const isShowTryItOutButton = ref(true)
watch(() => props.data, async (newVal, oldVal) => {
  if (props.data.projectParamas) {
    isShowTryItOutButton.value = props.data.projectParamas.showTryItOutButton
    isShowEnvUrl.value = props.data.projectParamas.showPrefixUrl
    environmentId.value = props.data.projectParamas.environmentId
    envUrl.value = props.data.projectParamas.conditionUrl
    init()
  }
}, {
  deep: true
})
let form = ref({} as any)
const methodStyle = ref({
  'GET': '#17b26a',
  'POST': '#ef6820',
  'DELETE': '#f04438',
  'PUT': '#2e90fa',
})

const init = async () => {
  if (props.data) {
    form.value.method = props.data.requestType
    form.value.name = props.data.name
    form.value.description = props.data.description
  }
  let splitUrlList = {} as any
  // 只有路径
  if (props.data.url?.indexOf('http') == -1) {
    form.value.url = props.data.url
  } else {
    // 有完整地址，根据有无环境服务进行区别处理
    splitUrlList = splitUrl(props.data.url)
    if (envUrl.value) {
      form.value.url = splitUrlList.path
    } else {
      form.value.url = props.data.url
    }
  }
}

const toDebug = () => {
  emit('to-debug')
}

const emit = defineEmits(['to-debug'])

onMounted(() => {
  init()
})
</script>

<style scoped lang="scss">
:deep(.el-input-group__prepend) {
  padding: 0;

  .el-select {
    width: 120px;
    margin: 0;

  }
}

.info {
  &-row {
    h4 {
      margin: 0;
      line-height: 32px;
    }

    margin-bottom: 10px;
  }

  &-content {
    margin-top: 1%;
    font-size: 14px;

    &_type {
      height: 28px;
      padding: 3px 8px;
      font-size: 14px;
      font-weight: 500;
      line-height: 22px;
      margin-left: 0;
      margin-right: 6px;
      border-radius: 6px;
      color: #fff
    }

    &_url {
      margin: 0 10px;
      font-size: 16px;
      font-style: normal;
      font-weight: 500;
      line-height: 24px;
      color: #344054;
    }

    &_status {
      .el-icon {
        margin: 0 5px 0 0;
        position: relative;
        top: 2px;
      }
    }
  }

  &-desc {
    font-size: 14px;
  }

  .env_url {
    margin: 0 10px;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    color: #344054;
    text-decoration: underline;
  }
}
</style>

<style scoped lang="scss">
.info-title {
  padding: 0 0 16px;
  font-size: 32px;
  align-items: center;
}
</style>
